<template>
	<view class="page">
		<swiper :indicator-dots="true" :autoplay="true" class="swiper" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.imageUrl" class="swiper-image" mode=""></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y="true" class="recommend-content">
			<!-- 推荐歌单区域 -->
			<view class="text">推荐歌单</view>
			<view>
				<navigator 
				class="item" 
				v-for="item in recommendList" 
				:key="item.id"
				:url="'/pages/recommend-detail/recommend-detail?item=' + encodeURIComponent(JSON.stringify(item))"
				>
					<view class="icon">
						<image :src="item.picUrl"></image>
					</view>
					<view class="desc">{{item.name}}</view>
				</navigator>
			</view>
			<!-- 推荐歌曲区域 -->
			<view class="text">推荐歌曲</view>
			<view>
				<view class="item" v-for="item in recommendMusic" :key="item.id">
					<view class="icon">
						<image :src="item.song.album.picUrl"></image>
					</view>
					<view class="desc">{{item.name}}</view>
					<view class="desc">{{item.song.artists[0].name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swiperList: [],
				recommendList: [],
				recommendMusic: []
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + '/banner',
				method: "GET",
				success:(res) => {
					if(res.data.code === 200){
						this.swiperList = res.data.banners.splice(0,4)
						console.log(this.swiperList)
					} 
				}
			})
			uni.request({
				url: serverUrl + '/personalized',
				method: "GET",
				success: (res) => {
					if(res.data.code === 200){
						this.recommendList = res.data.result
						console.log(this.recommendList)
					}
				}
			})
			uni.request({
				url: serverUrl + '/personalized/newsong',
				method: "GET",
				success: (res) => {
					if(res.data.code === 200){
						this.recommendMusic = res.data.result.splice(1)
						console.log(this.recommendMusic)
					}
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
	@import url("index.css");
</style>
